<script setup lang="ts">
import { ref, shallowRef, reactive, computed } from 'vue';
import { shopSaleorderList } from '@/common/api/hbMarket';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import { useRouter } from 'vue-router';
import { useCacheScrollTop } from '@/composables/useCacheScrollTop';
import orderSendDialog from '../components/orderSendDialog.vue';
import DICT from '../dict';
import { isEmpty } from 'lodash-es';

// 定义引用
const orderSendDialogRef = shallowRef<InstanceType<typeof orderSendDialog>>();

// 缓存页面滚动位置
useCacheScrollTop('main', 'mySales');

const router = useRouter();

const active = ref('');
const statistics = reactive({
  dfhcnt: 0,
  dshcnt: 0,
  yshcnt: 0,
  ytkcnt: 0,
});
const tabs = computed(() => {
  return DICT.orderStatus.map((v) => {
    let cnt = 0;
    switch (v.value) {
      case '1':
        cnt = statistics.dfhcnt;
        break;
      case '3':
        cnt = statistics.dshcnt;
        break;
      case '9':
        cnt = statistics.yshcnt;
        break;
      case '4':
        cnt = statistics.ytkcnt;
        break;
    }
    return { ...v, cnt };
  });
});

const server: OnPage = async (listConfig) => {
  const res = await shopSaleorderList({
    ...listConfig,
    otype: active.value,
  });
  if (!isEmpty(res.result.data)) {
    Object.assign(statistics, res.result.data);
  }
  return res.result.list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh, onRefreshCurrent } = useList(server, true);

// 查看详情
const toDetail = (oid: string) => {
  router.push('/hbMarket/orderDetail?oid=' + oid);
};

// 订单发货
const handleOrderSend = (oid: string) => {
  orderSendDialogRef.value?.open(oid);
};
</script>
<template>
  <div class="mySales">
    <div class="h-[44px]">
      <div class="fixed w-full z-[1000]">
        <van-tabs v-model:active="active" @change="onRefresh()">
          <van-tab
            v-for="item in tabs"
            :title="item.label"
            :key="item.value"
            :badge="item.cnt || ''"
            :name="item.value"
          ></van-tab>
        </van-tabs>
      </div>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="p-3">
          <van-card
            class="rounded-xl !pt-3 !bg-white"
            v-for="item in list"
            :key="item.oid"
            :price= "`${item.total_price.toFixed(2)} 积分`"
            :tag="item.status"
            :desc="`订单编号：${item.oid}`"
            :title="item.title"
            :thumb="item.skuimages ? item.skuimages.split(',')[0] : ''"
            :num="item.cnt"
            currency=""
            @click="toDetail(item.oid)"
          >
            <template #tags>
              <van-tag plain type="primary">{{ item.skuname }}</van-tag>
            </template>
            <template #footer>
              <van-button
                v-if="item.digstatus === 1"
                class="!mt-1"
                size="small"
                plain
                type="primary"
                @click.stop="handleOrderSend(item.oid)"
              >
                订单发货
              </van-button>
            </template>
          </van-card>
          <!-- 底部安全区 -->
          <div class="van-safe-area-bottom"></div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 订单发货弹窗 -->
    <orderSendDialog ref="orderSendDialogRef" @onRefresh="onRefreshCurrent" />
  </div>
</template>
<style lang="less" scoped>
.mySales {
  min-height: 100%;
  background: #fafafa;
}
</style>
